<template>
	<view class="home">
		<view class="padding-30 bg-ff bg-shadow radius-40">
			<view class="flex align-center justify-between">
				<view :class="type==1?'delivery_active':'delivery'" @click="choseType(1)">快递配送</view>
				<view :class="type==2?'delivery_active':'delivery'" @click="choseType(2)">现场取货</view>
			</view>
			<view class="" v-if="type==1">
				<view class="text-28 margin-top-35" @click="go('pages/user/address/list?type=2')" v-if="!adres">
					选择一个收货地址 <text class="tyIcon-arrow-right text-24"></text>
				</view>
				<view class="margin-top-30 flex align-center" v-if="adres"
					@click="go('pages/user/address/list?type=2')">
					<view class="flex-one">
						<view class="text-cut-one text-32">{{adres.address}}</view>
						<view class="text-28 text-99 margin-top-10">{{adres.name}} {{adres.phone}}</view>
					</view>
					<view class="tyIcon-arrow-right"></view>
				</view>
			</view>

		</view>
		<view class="padding-30 bg-ff bg-shadow radius-40 margin-top-40">
			<view class="flex align-center margin-bottom-30" v-if="good.name">
				<image :src="good.image" mode="" class="shopimg"></image>
				<view class="flex-one margin-left-30">
					<view class="text-cut-one height-40 line-40">{{good.name}}</view>
					<view class="text-cut-one height-40 line-40 text-24 text-99">规格：{{good.spec_name}}</view>
					
					<view class="margin-top-35 flex align-center">
						<view class="flex-one text-28 text-red">￥{{good.price}}</view>
						<view class="text-66 text-28">数量：{{good.num}}</view>
					</view>
				</view>
			</view>
			<view class="flex align-center margin-bottom-30" v-for="(item,index) in goodlist" :key="index" v-else>
				<image :src="item.memproduct.image" mode="" class="shopimg"></image>
				<view class="flex-one margin-left-30">
					<view class="text-cut-one height-40 line-40">{{item.memproduct.name}}</view>
					<view class="text-cut-one height-40 line-40 text-24 text-99">规格：{{item.Specs}}</view>
					<view class="margin-top-35 flex align-center">
						<view class="flex-one text-28 text-red">￥{{item.memproduct.price}}</view>
						<view class="text-66 text-28">数量：{{item.num}}</view>
					</view>
				</view>
			</view>
			<view class="padding-top-25 border-top-f7">
				<view class="text-28 text-right margin-top-25">
					小计： <text class="text-red">￥{{money}}</text>
				</view>
			</view>
		</view>

		<view class="padding-30 bg-ff bg-shadow radius-40 margin-top-40">
			<view class="flex align-center" v-if="type==1">
				<view class="flex-one text-28">配送</view>
				<view class="text-28">￥{{postage}}</view>
			</view>
			<view class="flex align-center" v-if="type==2">
				<view class="flex-one text-28">下单号码(后4位)</view>
				<view class="text-28">{{men.mobile.slice(men.mobile.length-4)}}</view>
			</view>
			<view class="text-66 text-30 margin-top-20">留言</view>
			<textarea placeholder="非必填" v-model="remarks"></textarea>
		</view>
		<view class="padding-30 bg-ff bg-shadow radius-40 margin-top-40">
			<view class="padding-bottom-25 border-bottom-f7">支付方式</view>
			<view class="flex align-center margin-top-25">
				<image src="/static/board/wx.png" mode="" class="wximg"></image>
				<image src="/static/board/wxmoney.png" mode="" class="wxmoney margin-left-10"></image>
				<view class="flex-one margin-left-10">
					<view class="text-28">钱包余额￥{{men.money}}</view>
					<view class="text-24 text-99">
						钱包支付￥{{Number(money)+Number(postage)}}后还需支付￥{{(Number(money)+Number(postage))-men.money<0?0:((Number(money)+Number(postage))-Number(men.money)).toFixed(2)}}
					</view>
				</view>
				<view class="tyIcon-round-check"></view>
			</view>
		</view>
		<view class="text-24 text-66 margin-top-20">(说明:先从钱包扣费，如钱包余额不足再微信支付差额)</view>
		<view class="footerbg margin-top-80">
			<view class="flex align-center padding-left-30">
				<view class=""></view>
				<view class="text-28">共{{good.num?good.num:goodlist.length}}件</view>
				<view class="text-28 margin-left-20">合计 ￥</view>
				<view class="text-32  flex-one">{{Number(money)+Number(postage)}}</view>
				<view class="paybtn" @click="getpay">去支付</view>
			</view>
		</view>
		<view class="text-24 margin-top-50 text-66"> <text @click="isAllChoose=!isAllChoose"
				:class="isAllChoose ? 'tyIcon-round-check' : 'tyIcon-round'" class="text-1a padding-right-10"></text>
			已阅 <text class="text-1a" @click="go('/pages/game/agreement')">《服务协议》</text> </view>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				goodlist: [],
				ids: "",
				adres: "",
				adresid: "",
				money: "",
				postage: "",
				remarks: "",
				good: {
					name: "",
					image: "",
					num: "",
					price: "",
					skuid: "",
					id: "",
					spec_name:""
				},
				men: {},
				isAllChoose: false,
				postage: ""
			}
		},
		onLoad(options) {
			console.log(options)
			this.ids = options.ids ? decodeURIComponent(options.ids) : ''
			this.good.id = options.id ? options.id : ""
			console.log(this.ids)
			if (options.name) {
				this.good.name = decodeURIComponent(options.name)
				this.good.image = decodeURIComponent(options.image)
				this.good.num = options.num
				this.good.price = options.price
				this.good.skuid = options.skuid
				this.money = options.price
				this.postage = options.postage
				this.good.spec_name = decodeURIComponent(options.spec_name)
			}
		},
		onShow() {
			let globalData = getApp().globalData
			let myAddressId = globalData.order.myAddressId ? globalData.order.myAddressId : ''
			if (myAddressId) {
				this.adresid = myAddressId
				this.rq.getData('address/default_list', {
					id: myAddressId
				}).then(res => {
					if (res.code == 1) {
						this.adres = res.data
					}
				})
			}

		},
		onReady() {
			this.rq.getData('address/default_list', {
				id: this.adresid
			}).then(res => {
				if (res.code == 1) {
					this.adres = res.data
					this.adresid = res.data.id
				}
			})
			if (!this.good.name) {
				this.rq.getData('Memorder/cart_info', {
					ids: this.ids
				}).then(res => {
					this.goodlist = res.data
					this.money = res.money
					this.postage = res.postage
				})
			}
			this.getMen()
		},
		methods: {
			getMen() {
				this.rq.getData('Wechat/user_info').then(res => {
					if (res.code == 1) {
						this.men = res.data
						
					}
				})
			},
			choseType(i) {
				this.type = i
			},
			getpay() {
				if (this.isAllChoose == false) {
					this.cn.alert('请阅读并同意《服务协议》')
					return false
				}
				this.rq.getData('Memorder/add_mem_order', {
					method: this.type == 1 ? 'delivery' : 'pickup',
					adrid: this.adresid,
					spec_id: this.good.skuid ? this.good.skuid : '',
					num: this.good.num ? this.good.num : '',
					remarks: this.remarks,
					product_id: this.good.id,
					cart_id: this.ids
				}).then(res => {
					if (res.code == 1) {
						if (res.data.is_pay == 0) {
							uni.redirectTo({
								url: '/pages/board/orderover'
							})
						} else {
							this.rq.getData('Memorder/Order_payment', {
								id: res.data.id
							}).then(res => {
								if (res.code == 1) {
									if (res.data.payment) {
										this.cn.requestPayment({
											appId: res.data.payment.appId,
											nonceStr: res.data.payment.nonceStr,
											package: res.data.payment.package,
											paySign: res.data.payment.paySign,
											signType: res.data.payment.signType,
											timeStamp: res.data.payment.timeStamp,
										}, 1).then(res => {
											uni.redirectTo({
												url: '/pages/board/orderover'
											})
										}).catch(res => {
											uni.redirectTo({
												url: '/pages/board/orderover'
											})
										})
									}
								}
							})
						}


					}
				})
			}
		},
	}
</script>

<style>
	.home {
		width: 100%;
		height: 100vh;
		background: #F2F3F3;
		padding: 20rpx 30rpx 30rpx;
	}

	.delivery_active {
		width: 300rpx;
		height: 80rpx;
		background: #101010;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}

	.delivery {
		width: 300rpx;
		height: 80rpx;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 2rpx solid #999999;
		font-size: 24rpx;
		color: #000;
		line-height: 80rpx;
		text-align: center;
	}

	.shopimg {
		width: 168rpx;
		height: 168rpx;
		border-radius: 40rpx;
	}

	.moneyimg {
		width: 24rpx;
		height: 24rpx;
	}

	textarea {
		width: 100%;
		height: 174rpx;
		background: #F3F3F3;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 16rpx 30rpx;
		margin-top: 20rpx;
	}

	.footerbg {
		width: 690rpx;
		height: 96rpx;
		background: #FFFFFF;
		box-shadow: -8rpx 0rpx 80rpx 0rpx rgba(176, 181, 185, 0.25);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		/* position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99; */
	}

	.paybtn {
		width: 190rpx;
		height: 96rpx;
		background: #101010;
		border-radius: 0rpx 200rpx 200rpx 0rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
	}

	.border-top-f7 {
		border-top: 1rpx solid #f7f7f7;
	}

	.wximg {
		width: 44rpx;
		height: 44rpx;
	}

	.wxmoney {
		width: 42rpx;
		height: 42rpx;
	}
</style>